<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-07 09:52:53
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-08 16:10:41
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #abcdef;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            display: block;
        }

        .pagination {
            margin: 10px auto;
            width: 1200px;
            height: 50px;
            display: flex;
            align-items: center;

        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 30px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }


        .total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        select {
            font-size: 25px;
            padding-left: 20px;
            margin-left: 30px;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <!-- innerHTML 浏览器解析子标签  innerText  浏览器不解析子标签 原样显示
        value -->
    <div class="pagination">
        <span class="prev">&lt;</span>
        <span class="total"> 98 / 100</span>
        <span class="next">&gt;</span>
        <select name="" id="">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
        </select>
    </div>
    <ul>
    </ul>

    <script>
        // 准备一个空字符串 
        // 让每个对象的数据 提取出来以后拼接到后边  
        // 拼接好的字符串放到 ul中 
        var jd =
            `{"items":{"page":"1","real_total_results":1000,"total_results":1000,"page_size":40,"pagecount":50,"data_from":"hid","item":[{"title":"优衣库 女装 棉质T恤(长袖) 430273 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN019g5Rmc1ewH9VOcioZ_!!196993935-0-picasso.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"627543382638","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=627543382638","data_f":null,"data_update":"2021-10-18 04:05:29"},{"title":"Data Zara新款 女装 垂褶直筒裙 08000878800","pic_url":"\/\/img.alicdn.com\/imgextra\/i1\/2209090117041\/O1CN01psHm3u21spO3HTo4R_!!2209090117041.jpg","promotion_price":"179.00","price":"299.00","sales":22,"num_iid":"649663627852","seller_nick":"雨雨宝代购","seller_id":"2209090117041","detail_url":"https:\/\/item.taobao.com\/item.htm?id=649663627852","data_f":null,"data_update":"2021-10-16 12:45:43"},{"title":"Data Zara早秋新款 女装 黑色纹理西装外套 08542182800","pic_url":"\/\/img.alicdn.com\/imgextra\/i3\/2209090117041\/O1CN01lEcwMt21spP1byqA5_!!2209090117041.jpg","promotion_price":"199.00","price":"499.00","sales":5,"num_iid":"654806505193","seller_nick":"雨雨宝代购","seller_id":"2209090117041","detail_url":"https:\/\/item.taobao.com\/item.htm?id=654806505193","data_f":null,"data_update":"2021-10-16 12:49:30"},{"title":"Data Zara早秋新款 TRF 女装 阔腿牛仔裤 06688224800","pic_url":"\/\/img.alicdn.com\/imgextra\/i3\/2209090117041\/O1CN01IAqDBX21spOmbq1p6_!!2209090117041.jpg","promotion_price":"189.00","price":"299.00","sales":13,"num_iid":"653090373325","seller_nick":"雨雨宝代购","seller_id":"2209090117041","detail_url":"https:\/\/item.taobao.com\/item.htm?id=653090373325","data_f":null,"data_update":"2021-10-16 12:56:19"},{"title":"Data Zara早秋新款 女装 带垫肩修身西装外套 08526707706","pic_url":"\/\/img.alicdn.com\/imgextra\/i4\/2209090117041\/O1CN01B7oCY521spP2QRdwS_!!2209090117041.jpg","promotion_price":"189.00","price":"699.00","sales":2,"num_iid":"655250722892","seller_nick":"雨雨宝代购","seller_id":"2209090117041","detail_url":"https:\/\/item.taobao.com\/item.htm?id=655250722892","data_f":null,"data_update":"2021-10-16 12:58:46"},{"title":"【返场可用券】女装 乔其纱荷叶边领衬衫(优衣库云朵衫)429418","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN01ih9Nbv1ewH9egqnRD_!!196993935-0-picasso.jpg","promotion_price":"99.00","price":"99.00","sales":0,"num_iid":"630637243596","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=630637243596","data_f":"ez","data_update":"2021-10-26 01:29:59"},{"title":"女装 法兰绒松紧长裤 419869 优衣库UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN01M954io1ewH64qS6P1_!!0-item_pic.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"603915062201","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=603915062201","data_f":null,"data_update":"2021-10-17 03:34:41"},{"title":"优衣库 女装\/情侣装 便携式防紫外线连帽外套(防晒衣) 419912","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN016XGJ8T1ewH9TUKFm0_!!196993935-0-picasso.jpg","promotion_price":"99.00","price":"99.00","sales":0,"num_iid":"594452029554","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=594452029554","data_f":null,"data_update":"2021-10-17 06:55:43"},{"title":"KASLEAD 新款 女装 欧美风圆领拼接长袖针织衫上衣 04331116330","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i2\/704346103\/O1CN011E3pb91uxDtCdDWpt_!!704346103.jpg","promotion_price":"59.00","price":"59.00","sales":10000,"num_iid":"652238928321","seller_nick":"mdxiaozhi","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=652238928321","data_f":"Ha","data_update":"2022-10-31 22:54:43"},{"title":"优衣库 男装\/女装 折叠伞 420562 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/O1CN01SAWSAR1ewH8EvemW2_!!0-item_pic.jpg","promotion_price":"79.00","price":"79.00","sales":200,"num_iid":"595863242238","seller_nick":null,"seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=595863242238","data_f":null,"data_update":"2021-10-19 19:14:20"},{"title":"KASLEAD 新款 女装 欧美风叠层装饰质感格子衬衫上衣 05216051712","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i2\/704346103\/O1CN01kRb29o1uxDrIrk6SY_!!704346103.jpg","promotion_price":"49.00","price":"49.00","sales":0,"num_iid":"640754369310","seller_nick":"mdxiaozhi","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=640754369310","data_f":null,"data_update":"2021-10-17 14:20:24"},{"title":"优衣库 女装 法国麻衬衫(长袖) 424658 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN01LHiAl11ewH7ye71oD_!!0-item_pic.jpg","promotion_price":"99.00","price":"99.00","sales":0,"num_iid":"622660418741","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=622660418741","data_f":null,"data_update":"2021-10-17 16:48:44"},{"title":"ZARA 新款 女装 提花修身通勤西装外套 08474464733","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/2228361831\/O1CN01IB8Iq81POduQH4scG_!!2228361831.jpg","promotion_price":"499.00","price":"499.00","sales":0,"num_iid":"653812517886","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=653812517886","data_f":"ez","data_update":"2021-12-02 23:35:01"},{"title":"【漫囧】鬼灭之刃 灶门祢豆子 圣诞 睡衣 女装 cos服装 现货","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/2940718379\/O1CN01AcA2gT2BldDOvaLWz_!!0-item_pic.jpg","promotion_price":"88.00","price":"88.00","sales":10000,"num_iid":"607612962557","seller_nick":"漫囧旗舰店","seller_id":"2940718379","detail_url":"https:\/\/item.taobao.com\/item.htm?id=607612962557","data_f":"Ha","data_update":"2022-10-23 01:01:56"},{"title":"ZARA 新款 TRF 女装 丝缎质感印花连衣裙 08342310800","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/2228361831\/O1CN01wKIehO1POduMBOcMj_!!2228361831.jpg","promotion_price":"259.00","price":"259.00","sales":0,"num_iid":"652476230338","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=652476230338","data_f":"ez","data_update":"2021-11-16 21:18:07"},{"title":"优衣库 女装 法兰绒格子半开领上衣(长袖) 421610 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/196993935\/O1CN01wvXLxU1ewH8VhuJiZ_!!0-item_pic.jpg","promotion_price":"59.00","price":"59.00","sales":0,"num_iid":"608838018646","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=608838018646","data_f":null,"data_update":"2021-10-17 19:41:06"},{"title":"优衣库 女装 罗纹圆领T恤(短袖) 430872 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN01BZiXdR1ewH9kDhn4Y_!!196993935-0-picasso.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"624874625258","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=624874625258","data_f":"ez","data_update":"2021-11-02 02:41:32"},{"title":"KASLEAD 新款 女装 欧美风刺绣性感露背吊带连体裤 07200221406","pic_url":"\/\/img.alicdn.com\/imgextra\/i2\/704346103\/O1CN01XThtdf1uxDsR7e283_!!704346103.jpg","promotion_price":"59.00","price":"59.00","sales":0,"num_iid":"648195301543","seller_nick":"凯诗兰迪欧美女装","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=648195301543","data_f":"Ha","data_update":"2022-01-06 22:59:32"},{"title":"KASLEAD 新款 女装 欧美风宽松条纹府绸衬衫休闲短裤 03510023060","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/704346103\/O1CN01lUKJAp1uxDshfacGw_!!704346103.jpg","promotion_price":"39.00","price":"39.00","sales":0,"num_iid":"651088595653","seller_nick":"mdxiaozhi","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=651088595653","data_f":"Ha","data_update":"2022-10-25 16:55:17"},{"title":"KASLEAD 新款 女装 欧美风扎染短上衣印花休闲短裤 03564077046","pic_url":"\/\/img.alicdn.com\/imgextra\/i4\/704346103\/O1CN01a6aJfJ1uxDrXP3bvb_!!704346103.jpg","promotion_price":"34.00","price":"34.00","sales":180000,"num_iid":"641748672221","seller_nick":"mdxiaozhi","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=641748672221","data_f":"xdl","data_update":"2022-07-02 20:01:01"},{"title":"优衣库 女装 高腰宽腿长裤 425341 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/196993935\/O1CN01zRQHU71ewH916PuaA_!!0-item_pic.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"616591228867","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=616591228867","data_f":null,"data_update":"2021-10-17 22:57:39"},{"title":"KASLEAD 新款 女装 欧美风洋气v领镂空花边针织马甲背心马夹外套","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/704346103\/O1CN01G5elHv1uxDqkYWBGJ_!!704346103.jpg","promotion_price":"32.00","price":"32.00","sales":0,"num_iid":"638301796004","seller_nick":"mdxiaozhi","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=638301796004","data_f":"Ha","data_update":"2022-10-26 05:13:51"},{"title":"犬夜叉 桔梗 巫女服 和服 cosplay服装 全套 动漫 衣服 女装 假发","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/TB1DlV8KXXXXXahXFXXXXXXXXXX_!!0-item_pic.jpg","promotion_price":"83.00","price":"83.00","sales":0,"num_iid":"522756317480","seller_nick":"筷子闯马头","seller_id":"2644559082","detail_url":"https:\/\/item.taobao.com\/item.htm?id=522756317480","data_f":"Ha","data_update":"2022-10-23 00:09:59"},{"title":"优衣库聪明裤 女装 弹力九分裤 (通勤西装裤长裤) 445296\/439247","pic_url":"https:\/\/gw.alicdn.com\/imgextra\/O1CN01ehnmuR1ewHIOuqNzu_!!196993935.jpg","promotion_price":"199.00","price":"199.00","sales":45850000,"num_iid":"632021377346","seller_nick":"优衣库官方旗舰店","seller_id":"196993935","detail_url":"https:\/\/item.taobao.com\/item.htm?id=632021377346","data_f":"Ha","data_update":"2022-09-07 18:33:45"},{"title":"优衣库 女装 EZY弹力九分裤 425344 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/196993935\/O1CN012q5kQM1ewHAH54CH0_!!0-item_pic.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"610194012059","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=610194012059","data_f":null,"data_update":"2021-10-19 18:12:26"},{"title":"ZARA 冬季新款 女装 仿皮短连衣裙 02969313717","pic_url":"\/\/img.alicdn.com\/imgextra\/i3\/2228361831\/O1CN0180zndx1POdv2c39Ka_!!2228361831.jpg","promotion_price":"399.00","price":"399.00","sales":2,"num_iid":"658170840643","seller_nick":"zara官方旗舰店","seller_id":"2228361831","detail_url":"https:\/\/item.taobao.com\/item.htm?id=658170840643","data_f":"jcs","data_update":"2021-11-27 18:55:09"},{"title":"ZARA新款 TRF 女装 中腰及踝喇叭牛仔裤 03643012800","pic_url":"http:\/\/img.alicdn.com\/imgextra\/i1\/2228361831\/O1CN01pt0rSa1POdgxSXH9K_!!2228361831.jpg","promotion_price":"199.00","price":"199.00","sales":0,"num_iid":"586777007872","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=586777007872","data_f":"ez","data_update":"2021-11-04 03:09:58"},{"title":"优衣库 女装 弹力裙(半身裙通勤职业) 439263 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/196993935\/O1CN01eRDJ931ewHJE5jDij_!!196993935.jpg","promotion_price":"99.00","price":"99.00","sales":100,"num_iid":"644929660920","seller_nick":"优衣库官方旗舰店","seller_id":"196993935","detail_url":"https:\/\/item.taobao.com\/item.htm?id=644929660920","data_f":"Ha","data_update":"2022-10-29 08:07:59"},{"title":"【SEN】BJD\/SD\/DD娃娃\/娃衣\/女装\/COS\/SABER\/日常服\/睡衣\/泳装","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/69023553\/T1FcbiFnpbXXXXXXXX_!!0-item_pic.jpg","promotion_price":"48.00","price":"48.00","sales":0,"num_iid":"35148932222","seller_nick":"月下西桥","seller_id":"69023553","detail_url":"https:\/\/item.taobao.com\/item.htm?id=35148932222","data_f":"Ha","data_update":"2022-10-23 00:04:35"},{"title":"【设计师合作款】女装 牛仔休闲短裤(水洗产品) 425864 优衣库","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i2\/196993935\/O1CN01AE2Yhx1ewH73G3Pak_!!0-item_pic.jpg","promotion_price":"199.00","price":"199.00","sales":0,"num_iid":"611042720840","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=611042720840","data_f":"ez","data_update":"2021-10-29 13:02:12"},{"title":"ZARA 新款 TRF 女装 仿皮短裤 07901291706","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/2228361831\/O1CN01KMYvsN1POdqG24dTO_!!2228361831.jpg","promotion_price":"199.00","price":"199.00","sales":0,"num_iid":"630202744993","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=630202744993","data_f":null,"data_update":"2021-10-18 14:33:45"},{"title":"ZARA 秋季新款 女装 不对称披肩针织衫 06873108712","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/2228361831\/O1CN01O23T5h1POdtxSkI7M_!!0-item_pic.jpg","promotion_price":"399.00","price":"399.00","sales":0,"num_iid":"655218679409","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=655218679409","data_f":null,"data_update":"2021-10-18 14:41:44"},{"title":"女装 全棉休闲T恤(法式袖) 424867 优衣库UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/196993935\/O1CN01GAZSQ31ewH7M4OlDG_!!0-item_pic.jpg","promotion_price":"79.00","price":"79.00","sales":0,"num_iid":"616426236737","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=616426236737","data_f":null,"data_update":"2021-10-18 15:19:47"},{"title":"优衣库 男装\/女装\/情侣装 可机洗宽松V领背心 443918\/439928","pic_url":"https:\/\/img.alicdn.com\/bao\/uploaded\/i4\/196993935\/O1CN01i1iI4T1ewHDzL13Xz_!!0-item_pic.jpg","promotion_price":"149.00","price":"149.00","sales":2000,"num_iid":"655292337972","seller_nick":"","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=655292337972","data_f":null,"data_update":"2021-10-18 20:57:15"},{"title":"ZARA 秋季新款 女装 条纹针织衫 06254106104","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/O1CN019HniLR1POdttrbjkz_!!2228361831.jpg","promotion_price":"299.00","price":"299.00","sales":0,"num_iid":"655991127748","seller_nick":null,"seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=655991127748","data_f":null,"data_update":"2021-10-18 15:29:01"},{"title":"优衣库 女装 羊毛混纺双面呢大衣 432068 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i1\/196993935\/O1CN01M9cPmi1ewH8i88xam_!!0-item_pic.jpg","promotion_price":"899.00","price":"899.00","sales":0,"num_iid":"624226446897","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=624226446897","data_f":null,"data_update":"2021-10-18 15:57:03"},{"title":"ZARA 新款 女装 粗横棱纹织物裙子 04886458800","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i3\/2228361831\/O1CN01Xk7a8l1POdp7xqsc7_!!2228361831.jpg","promotion_price":"159.00","price":"159.00","sales":0,"num_iid":"628539236611","seller_nick":"zara官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=628539236611","data_f":null,"data_update":"2021-10-18 15:58:15"},{"title":"1G4K201高端冬装 女装 双面穿 豹纹羽绒服吊牌5390","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i4\/36778421\/O1CN01M3rzQd2C4rpMbrRwD_!!36778421.jpg","promotion_price":"1885.00","price":"1885.00","sales":0,"num_iid":"602752455766","seller_nick":"杨家儒帅","seller_id":"36778421","detail_url":"https:\/\/item.taobao.com\/item.htm?id=602752455766","data_f":"Ha","data_update":"2022-10-23 00:55:44"},{"title":"KASLEAD 新款 女装 欧美风腰带配饰高腰裤多色 08412691300","pic_url":"\/\/img.alicdn.com\/imgextra\/i1\/704346103\/O1CN0173Ye691uxDhh4pang_!!704346103.jpg","promotion_price":"59.00","price":"59.00","sales":1300000,"num_iid":"591566263894","seller_nick":"mdxiaozhi","seller_id":"704346103","detail_url":"https:\/\/item.taobao.com\/item.htm?id=591566263894","data_f":"xdl","data_update":"2022-10-24 11:53:57"},{"title":"优衣库 女装 高弹力运动短裤 422814 UNIQLO","pic_url":"https:\/\/img.alicdn.com\/imgextra\/i2\/196993935\/O1CN0185QAbL1ewHCG3AgcU_!!0-item_pic.jpg","promotion_price":"59.00","price":"59.00","sales":0,"num_iid":"611580730319","seller_nick":"优衣库官方旗舰店","seller_id":"0","detail_url":"https:\/\/item.taobao.com\/item.htm?id=611580730319","data_f":null,"data_update":"2021-10-18 17:53:11"}],"item_weight_update":0},"error_code":"0000","reason":"ok","secache":"a8881ed5637e3c7e84f03acdc86be64f","secache_time":1667285300,"secache_date":"2022-11-01 14:48:20","translate_status":"","translate_time":0,"language":{"default_lang":"cn","current_lang":"cn"},"error":"","cache":1,"api_info":"today:34 max:50 all[43=34+0+9];expires:2022-11-07","execution_time":"0.281","server_time":"Beijing\/2022-11-05 10:48:13","client_ip":"124.128.202.18","call_args":{"q":"女装","start_price":"0","end_price":"0","page":"1","cat":"0"},"api_type":"taobao","translate_language":"zh-CN","translate_engine":"baidu_api","server_memory":"6.01MB","request_id":"gw-3.6365ceecd2168","last_id":"1334890035"}`;
        var res = JSON.parse(jd);
        // console.log(res['items']['item']);
        var datas = res['items']['item']; //数组 
        var arrs = [];
        datas.forEach(function (item) {
            var map = {};
            map['title'] = item.title;
            map['pic_url'] = item.pic_url;
            map['price'] = item.price;
            map['sales'] = item.sales;
            map['data_update'] = item.data_update;
            map['detail_url'] = item.detail_url;

            arrs.push(map);



        });
        console.log(arrs);
        // var strs = '';

        // arrs.forEach(function(item){
        //     strs+= `
        //         <li> 
        //             <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
        //             <p>${item.title}</p>
        //             <p>价格:${item.price}</p>                    
        //             <p>销量:${item.sales}</p> 
        //             <p>更新时间:${item.data_update}</p>                                      
        //         </li>  
        //     `
        // });

        // var uls = document.querySelector("ul");
        // uls.innerHTML = strs;

        // 渲染数据到页面  

        // 用户点击  <  页码 --   
        // 3/ 100   <  => 2 / 100 

        // 用户点击  >  页码 ++
        // 3/ 100   <  => 4 / 100 


        //  1 / 100  < 上一页 按钮 失效 

        // 100 / 100 > 下一页 按钮  失效 



        // 默认每一页显示 4 条 

        // 下拉菜单 可以让用户选择每一页多少条  

        // 1  0~3   4
        // 2  4~7   4
        // 3  8~11  4
        var current = 4;
        var page_size = 4;
        var prevBtn = document.querySelector('.prev'); //上一页的按钮
        var nextBtn = document.querySelector('.next');
        //    (current-1)*page_size ~current*page_size-1
        var urlEle = document.querySelector('ul');
        var totalBox = document.querySelector('.total');
        var selectEle =  document.querySelector('select');
        // [{},{},{}]
        // var strs = '';
        // [(current-1)*page_size,current*page_size)
        function bindHtml() {
            var perPage = arrs.slice((current - 1) * page_size, current * page_size); // [{},{},{}]  这是每一页的数据
            urlEle.innerHTML = perPage.reduce(function (prev,item) {
                return prev += `
                <li> 
                    <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                    <p>${item.title}</p>
                    <p>价格:${item.price}</p>                    
                    <p>销量:${item.sales}</p> 
                    <p>更新时间:${item.data_update}</p>                                      
                </li>  
            `
            },'')

           

            total = Math.ceil(arrs.length/page_size);
            totalBox.innerText = `${current} / ${total}`
            
            prevBtn.className = current ===1?'prev disable':'prev';
            nextBtn.className = current ===total?'next disable':'next';
        }

        bindHtml();

        prevBtn.onclick = function(){
            if(current === 1) return
            current--;
            bindHtml();
        }

        nextBtn.onclick = function(){
            if(current === total) return
            current++;
            bindHtml();
        }

        selectEle.onchange = function(){
            // alert(selectEle.value) // string
            page_size = selectEle.value - 0;
            current = 1;
            bindHtml()
        }


    </script>
</body>

</html>